<template>
  <div class="hello">
    <!--<h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <ul>
      <li>
        <a
          href="https://vuejs.org"
          target="_blank"
        >
          Core Docs
        </a>
      </li>
      <li>
        <a
          href="https://forum.vuejs.org"
          target="_blank"
        >
          Forum
        </a>
      </li>
      <li>
        <a
          href="https://chat.vuejs.org"
          target="_blank"
        >
          Community Chat
        </a>
      </li>
      <li>
        <a
          href="https://twitter.com/vuejs"
          target="_blank"
        >
          Twitter
        </a>
      </li>
      <br>
      <li>
        <a
          href="http://vuejs-templates.github.io/webpack/"
          target="_blank"
        >
          Docs for This Template
        </a>
      </li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li>
        <a
          href="http://router.vuejs.org/"
          target="_blank"
        >
          vue-router
        </a>
      </li>
      <li>
        <a
          href="http://vuex.vuejs.org/"
          target="_blank"
        >
          vuex
        </a>
      </li>
      <li>
        <a
          href="http://vue-loader.vuejs.org/"
          target="_blank"
        >
          vue-loader
        </a>
      </li>
      <li>
        <a
          href="https://github.com/vuejs/awesome-vue"
          target="_blank"
        >
          awesome-vue
        </a>
      </li>
    </ul>-->
    <div>
      <form-item ismust="*" cname="节点名称"><input slot="input"
                                                type="text" id="nodeName" class="form-control" placeholder="请输入节点名称">
        <p slot="descript">节点的英文名称，不能出现中文</p>
      </form-item>
      <form-item2 ismust="*" cname="别名"><input slot="input"
                                               type="text" id="nodeName" class="form-control" placeholder="请输入别名">
      </form-item2>
    </div>
    <div>
      <User :user_item="userItem" ref="userInfo"></User>
    </div>
    <div align="left">
      <input type="button" value="调用控件方法" v-on:click="call_child()"/><br/>
      <input type="button" value="跳转到用户管理页面" v-on:click="redirect()"/></div>
  </div>
</template>

<script>
  import formItem from './formItem'
  import formItem2 from './formItem2'
  import User from './user'

  export default {
    name: 'HelloWorld',
    data () {
      return {
        msg: 'Welcome to Your Vue.js App',
        userItem: {
          no: 'a1',
          name: 'b1',
          cname: 'c1'
        }
      }
    },
    components: {formItem, formItem2, User},
    methods: {
      redirect: function () {
        this.$router.push({
          name: 'UserManage',
          params: {no: 'x2', name: 'y2', cname: 'z2'}
        })

      },
      call_child: function () {
        let user = this.$refs.userInfo
        user.read()
      }
    },
    mounted () {
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  @import url("../css/page.css");

  h1, h2 {
    font-weight: normal;
  }

  ul {
    list-style-type: none;
    padding: 0;
  }

  li {
    display: inline-block;
    margin: 0 10px;
  }

  a {
    color: #42b983;
  }
</style>
